<template>
    <div class="btns bor">
        <div class="item">
            <img src="@/assets/service/answer04.png">
        </div>
        <div class="item" v-if="index == 4" @click="proposal">
            <img src="@/assets/service/answer03.png">
        </div>
        <div class="item" v-else @click="callPhone">
            <img src="@/assets/service/answer02.png">
        </div>
    </div>
</template>
<script>
import phone from "@/common/PhoneNum";
export default {
    name: "HelpButton",
    props: {
        index: {
            type: Number | String,
            default: null,
        }
    },
    methods: {
        callPhone() {
            window.location.href = phone;
        },
        proposal() {
            this.$router.push({ name: "proposal" })
        }
    }
}
</script>
<style lang="scss" scoped>
.bor {
    border-radius: 10px;
    overflow: hidden;
}

.btns {
    display: flex;
    background-color: white;
    width: 345px;
    margin: 0 auto;

    &.active {
        position: absolute;
        bottom: 10px;
    }

    .item {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;

        img {
            height: 40px;
            object-fit: contain;
        }
    }
}
</style>